<div>
    <p class="basicInfo">
        预览设备
    </p>
    <el-row>
        <div class="width100 d-flex a-center">
            <el-form-item label="预览质量:" prop="imgQuality" class="width25">
                <el-input type="number" v-model="devicePreviewParam.imgQuality" placeholder=""
                          oninput="if(value.length>10)value=value.slice(0,10)" min="0" max="100"
                          @change="autoDevicePreview" class="width100">
                </el-input>
            </el-form-item>
            <el-form-item label="缩放倍数:" prop="scale" class="width25">
                <el-input type="number" v-model="devicePreviewParam.imgScale" placeholder=""
                          oninput="if(value.length>10)value=value.slice(0,10)" min="0" step="0.1"
                          max="1" @change="autoDevicePreview" class="width100">
                </el-input>
            </el-form-item>
            <el-form-item label="预览高度:" prop="scale" class="width25">
                <el-input type="number" v-model="devicePreviewParam.previewHeight" placeholder=""
                          min="0" max="5000" @change="autoDevicePreview" class="width100">
                </el-input>
            </el-form-item>
            <el-form-item label="预览阈值:" prop="scale" class="width25">
                <el-input type="number" v-model="devicePreviewParam.imgThreshold" placeholder=""
                          oninput="if(value.length>10)value=value.slice(0,10)" min="0" max="255"
                          @change="autoDevicePreview" class="width100">
                </el-input>
            </el-form-item>
        </div>
    </el-row>
    <el-row>
        <div class="width100 d-flex a-center">
            <el-form-item label="APP刷新:" prop="appSpace" class="width25">
                <el-input type="number" v-model="devicePreviewParam.appSpace" placeholder=""
                          oninput="if(value.length>10)value=value.slice(0,10)" min="10" step="10"
                          max="5000" @change="autoDevicePreview" class="width100">
                </el-input>
            </el-form-item>
            <el-form-item label="浏览器刷新:" prop="clientSpace" class="width25">
                <el-input type="number" v-model="devicePreviewParam.clientSpace" placeholder=""
                          oninput="if(value.length>10)value=value.slice(0,10)" min="10" step="10"
                          max="5000" @change="autoDevicePreview" class="width100">
                </el-input>
            </el-form-item>
            <el-form-item label="操作记录:" prop="clientSpace" class="width50">
                <el-input type="textarea" v-model="devicePreviewParam.operateRecord" placeholder=""
                          class="width100">
                </el-input>
            </el-form-item>
        </div>
    </el-row>
    <el-row>
        <div class="width100 d-flex a-center">
            <el-form-item label="设备预览:" prop="previewImg" class="width100">
                <div>
                    x:{{deviceMousePosition.x }} y:{{deviceMousePosition.y}}
                </div>
                <div style="display: flex;justify-content: flex-end;align-items: center;text-align: center;width: 100%">
                    <el-button type="danger" size="mini" style="margin-left:10px" @click.stop.prevent="fixedOperate('home')">
                        主页
                    </el-button>
                    <el-button type="danger" size="mini" style="margin-left:10px" @click.stop.prevent="fixedOperate('back')">
                        返回
                    </el-button>
                    <el-button type="danger" size="mini" style="margin-left:10px" @click.stop.prevent="fixedOperate('recents')">
                        任务
                    </el-button>
                    <el-button type="danger" size="mini" style="margin-left:10px" @click.stop.prevent="fixedOperate('quickSettings')">
                        通知
                    </el-button>
                    <el-button type="danger" size="mini" style="margin-left:10px" @click.stop.prevent="fixedOperate('powerDialog')">
                        电源
                    </el-button>
                    <el-button type="primary" size="mini" style="margin-left:10px" @click.stop.prevent="devicePreviewParam.operateRecord = ''">
                        清空操作记录
                    </el-button>
                </div>
                <div style="display: flex;justify-content: flex-end;align-items: center;text-align: center;width: 100%">
                    <div style="display: inline-flex;justify-content: flex-end;align-items: center;margin-left:10px;">
                        <span>
                            开启灰度化：
                        </span>
                        <el-switch v-model="devicePreviewParam.isOpenGray" @change="autoDevicePreview"
                        />
                    </div>
                    <div style="display: inline-flex;justify-content: flex-end;align-items: center;margin-left:10px;">
                        <span>
                            开启阈值化：
                        </span>
                        <el-switch v-model="devicePreviewParam.isOpenThreshold" @change="autoDevicePreview"
                        />
                    </div>
                    <div style="display: inline-flex;justify-content: flex-end;align-items: center;margin-left:10px;">
                        <span>
                            参数变化后自动预览：
                        </span>
                        <el-switch v-model="devicePreviewParam.valueUpdateAfterAutoPreview" />
                    </div>
                    <el-button type="danger" size="mini" style="margin-left:10px" id="loadPreviewImg"
                               @click.stop.prevent="startPreviewDevice(true)">
                        开始预览
                    </el-button>
                    <el-button type="danger" size="mini" style="margin-left:10px" @click.stop.prevent="stopPreviewDevice(true)">
                        停止预览
                    </el-button>
                </div>
                <div style="min-height: 40vh;width: 100%;display: flex;justify-content: center;align-items: center;text-align: center;">
                    <div style="font-size: 20px;color: rgba(29,140,128,0.29)">
                        <img id="devicePreviewImg" draggable="false" style="width: auto;margin: 0; padding: 0;height: 500px;max-width: 100%;"
                        />
                    </div>
                </div>
            </el-form-item>
        </div>
    </el-row>
</div>